<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>{{$title}}</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="/xadmin/css/font.css">
    <link rel="stylesheet" href="/xadmin/css/xadmin.css">
    <script src="/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/xadmin/js/xadmin.js"></script>
</head>

<body>
    <!-- <?php var_dump($data) ?> -->
    <div class="x-nav">
        @csrf
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="logOut()">
            <span style="line-height:30px">log out</span>
        </a>
        <span style="line-height:37px;float:right;margin-right: 30px;">Hello {{ session('username') }}</span>
    </div>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px"
                            href="/reserve">
                            <span style="line-height:30px">New Reservation</span>
                        </a>
                    </div>
                    <div class="layui-card-body ">
                        <table class="layui-table layui-form">
                            <thead>
                                <tr>
                                    <th>reserved day</th>
                                    <th>invitation code</th>
                                    <th>status</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Enpty -->
                                @empty($data)
                                    <th colspan="3" style="text-align: center;">No Reservation Yet</th>
                                @else
                                    @foreach ($data as $v)
                                        <tr>
                                            <td>{{$v['reserved_day']}}</td>
                                            <td>{{$v['invitation_code']}}</td>
                                            <td>
                                                @if($v['status'] === 1)
                                                    @if(env('CURRENT_DAY') < $v['reserved_day'])
                                                        <a href="javascript:cancel({{$v['id']}})" style="color: blue">Cancel</a>
                                                    @else 
                                                        Cancel
                                                    @endif
                                                @else
                                                    Authenticated
                                                @endif    
                                            </td>
                                        </tr>
                                    @endforeach
                                @endempty
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    // Log out method
    function logOut() {
       var token = $("input[name='_token']").val();
       
        //询问框
        layer.confirm('Are you sure you want to log out?', {
            btn: ['confirm', 'cancel'],
            title: 'prompt'
        }, function () {
            console.log('confirm');
            $.ajax({
                url: '/logout',
                type: 'POST',
                dataType: 'json',
                data: {'_token':token},
                success: function(res) {
                    layer.alert(JSON.stringify(res.message), {
    			        title: res.message
    			    })  
                    window.setTimeout("window.location='/login_view'",1000);
                    console.log(res);
                }
            })
        }, function () {
            console.log('cancel');
        });
    }

    function cancel(id) {
        var token = $("input[name='_token']").val();
        //询问框
        layer.confirm('Are you sure you want to cancel the reservation?', {
            btn: ['confirm', 'cancel']
        }, function () {
            $.ajax({
                url: '/cancel',
                type: 'POST',
                dataType: 'json',
                data: {'id': id, '_token': token},
                success: function(res) {
                    if (res.status_code === 200) {
                        layer.msg(res.message, {icon:1});
                        setTimeout(function(){
                            window.location.reload();
                        }, 1500);
                    } else {
                        layer.msg(res.message, {icon:2});
                    }
                }
            })
        }, function () {

        });
    }
</script>

</html>